<template>
	<view class="headerNavbar" :style="{ height: navbarHeight + 'px', backgroundColor: props.backgroundColor }">
		<view class="titleBar" :style="{ height: capsuleHeight + 'px',top: TimeBarHeight + 'px'}">
			<uni-icons v-if="isIcon" type="closeempty" size="30" @click="goback"></uni-icons>
			<image v-else :src="backIcon" mode="aspectFill" @click="goback"></image>
			<view class="title">{{ title }}</view>
		</view>
    </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { TimeBarHeight, capsuleHeight, navbarHeight } from '@/config/systemInfo.js'
const props = defineProps({ 
	title:{
		type:String,
		default:''
	},
	backIcon:{
		type:String,
		default:'../static/bar/back.png'
	},
    backgroundColor: {
        type: String,
        default: '#fff'
    },
	// 判断是返回上一页还是回其他页
	BackPage: {
		type: Number,
		default: 1,
	},
	BackPath: {
		type: String,
		default: '/pages/home/index' 
	},
	isIcon:{
		type:Boolean,
		default:false
	}
});

// 返回页面
const goback = () => {
	if (props.BackPage === 0) {
		// 返回其他页
		uni.reLaunch({
			url: props.BackPath 
		});
	} else {
		// 返回上一页
		uni.navigateBack({
			delta: props.BackPage
		});
	}
};
</script>

<style scoped lang="scss">
	.headerNavbar{
		width: 100%; 
		position: sticky;  
		top: 0; 
		left: 0;
		right: 0;
		z-index: 9;
		.titleBar{
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			padding: 0 20rpx;
			padding-right: 41rpx;
			box-sizing: border-box;
			.title{
				width: 100%;
				text-align: center;
			}
			image{
				width: 21rpx;
				height: 32rpx;
			}
		}
	}
</style>